<template>
  <div class="item-option">
    <div class="create_content">新建内容</div>
    <div class="line"></div>
    <div class="header_title">{{text}}</div>

    <div class="container">
      <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="组件组题" prop="age" :rules="[
        { required: true, message: '主题不能为空' },
        { type: 'string', message: '主题要为字符串' },]">
          <el-input type="text" v-model.number="numberValidateForm.compomentSubject" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题" label-width="100px" v-if="isFormTitle">
          <el-input type="text" v-model="numberValidateForm.compomentTitel"></el-input>
        </el-form-item>

        <template v-if="activeKey== 'base-text'">
          <TextVal></TextVal>
        </template>
        <template v-if="activeKey== 'label-text'">
          <label-text></label-text>
        </template>
        <template v-if="activeKey== 'multi-row'">
          <multi-row></multi-row>
        </template>
        <template v-if="activeKey== 'graphic'">
          <Graphic></Graphic>
        </template>
        <template v-if="activeKey== 'mixed'">
          <Mixed></Mixed>
        </template>
        <template v-if="activeKey== 'message-board'">
          <message-board></message-board>
        </template>
        <template v-if="activeKey== 'picture'">
          <Picture></Picture>
        </template>
        <template v-if="activeKey== 'single-text'">
          <single-text></single-text>
        </template>

        <template v-if="activeKey== 'video'">
          <Video></Video>
        </template>
        <template v-if="activeKey== 'audio'">
          <Audio></Audio>
        </template>
        <template v-if="activeKey== 'broadcast'">
          <broad-cast></broad-cast>
        </template>

        <template v-if="activeKey== 'charts-data'">
          <chart-data></chart-data>
        </template>
        <template v-if="activeKey== 'completion-rate'">
          <completion-rate></completion-rate>
        </template>


        <template v-if="activeKey== 'weather'">
          <Weather></Weather>
        </template>
        <template v-if="activeKey== 'map'">
          <Map></Map>
        </template>
        <template v-if="activeKey== 'traffic'">
          <Traffic></Traffic>
        </template>
        <template v-if="activeKey== 'freash'">
          <Freash></Freash>
        </template>
        <template v-if="activeKey== 'notes'">
          <Notes></Notes>
        </template>
        <template v-if="activeKey== 'banners'">
          <Banners></Banners>
        </template>
        <template v-if="activeKey== 'countdown'">
          <count-down></count-down>
        </template>
        <template v-if="activeKey== 'floor'">
          <Floor></Floor>
        </template>
        <template v-if="activeKey== 'wait'">
          <wait-message></wait-message>
        </template>
        <template v-if="activeKey== 'form'">
          <Form></Form>
        </template>
        <template v-if="activeKey== 'window'">
          <window-message></window-message>
        </template>
        <template v-if="activeKey== 'rent'">
          <rent-message></rent-message>
        </template>
        <template v-if="activeKey== 'day'">
          <Day></Day>
        </template>
        <template v-if="activeKey== 'important-work'">
          <important-work></important-work>
        </template>
        <template v-if="activeKey== 'group-text'">
          <group-text></group-text>
        </template>
      </el-form>
    </div>
    <div class="footer">
      <el-button type="primary" @click="submitForm('ruleForm')" class="submit">提交</el-button>
      <el-button @click="cancelForm" class="cancel">取消</el-button>
    </div>
  </div>
  
</template>

<script>
/**
* description: 右侧展示的内容
*/
// 导入的图文类
import TextVal from "@/components/graphic_type/text.vue";
import LabelText from "@/components/graphic_type/label_text.vue";
import MultiRow from "@/components/graphic_type/multi_row.vue";
import Graphic from '@/components/graphic_type/graphic.vue'
import Mixed from "@/components/graphic_type/mixed.vue";
import MessageBoard from "@/components/graphic_type/message_board.vue";
import Picture from "@/components/graphic_type/picture.vue";
import SingleText from "@/components/graphic_type/single_text.vue";

// 导入影视类
import Video from "@/components/film_type/video.vue";
import Audio from "@/components/film_type/audio.vue";
import BroadCast from "@/components/film_type/broad_cast.vue";
// 导入数据类
import ChartData from "@/components/data_type/chart_data.vue";
import CompletionRate from "@/components/data_type/completion_rate.vue";

// 导入小工具
import Weather from "@/components/tools_type/weather.vue";
import Map from "@/components/tools_type/map.vue"
import Traffic from "@/components/tools_type/traffic.vue"
import Freash from "@/components/tools_type/freash.vue";
import Notes from "@/components/tools_type/notes.vue";
import Banners from "@/components/tools_type/banners.vue";
import CountDown from "@/components/tools_type/count_down.vue"
import Floor from "@/components/tools_type/floor.vue";
import WaitMessage from "@/components/tools_type/wait_message.vue";
import Form from "@/components/tools_type/form.vue";
import WindowMessage from "@/components/tools_type/window_message.vue";
import RentMessage from "@/components/tools_type/rent_message.vue";
import Day from "@/components/tools_type/day.vue";
import ImportantWork from "@/components/tools_type/important_work.vue";
import GroupText from "@/components/tools_type/group_text.vue";

import bus from '@/untils/bus';

export default {
  name: "itemOption",
  components: {
    TextVal,
    LabelText,
    MultiRow,
    Graphic,
    Mixed,
    MessageBoard,
    Picture,
    SingleText,
    Video,
    BroadCast,
    Audio,
    ChartData,
    CompletionRate,
    Weather,
    Map,
    Traffic,
    Freash,
    Notes,
    CountDown,
    Banners,
    Floor,
    WaitMessage,
    Form,
    WindowMessage,
    RentMessage,
    ImportantWork,
    GroupText,
    Day
  },
  data() {
    return {
      // 组件主题的属性
      numberValidateForm: {
        compomentSubject: "",
        compomentTitel: "",
      },
      // 左侧点击的index下标
      activeKey: '',
      text: ''
    };
  },
  created() {
    // 定义事件,注意箭头函数应用
    bus.$on('change_page', data => {
      this.activeKey = data.key;
      this.text = data.text;
      this.numberValidateForm = {}
    })
  },
  computed:{
   isFormTitle(){
     return !['label-text','graphic','message-board','picture','single-text'].includes(this.activeKey)
   }
  },
  methods: {
    submitForm() {
        this.numberValidateForm = Object.assign(this.numberValidateForm,this.$children[0].$children[this.$children[0].$children.length - 1].submit())
        console.log('-------123',this.numberValidateForm)
      // this.$refs.numberValidateForm.validate((valid) => {
      //   if (valid) {
      //     alert('submit!');
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
    },
    cancelForm() {
      console.log("取消提交");
    },
  },
};
</script>

<style lang="scss" scoped>
.item-option {
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  background: #ffffff;

  .create_content {
    text-align: left;
    height: 64px;
    line-height: 64px;
    padding-left: 20px;
    font-size: 18px;
    font-family: MicrosoftYaHeiSemibold;
    color: #404144;
  }

  .line {
    height: 1px;
    background: #e9edf4;
    margin: 0 20px;
  }

  .header_title {
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    text-align: left;
    font-size: 16px;
    font-family: MicrosoftYaHeiSemibold;
    color: #404144;
  }

  .container {
    margin-left: 15px;
    margin-bottom: 30px;

    .demo-ruleForm {
      width: 72%;
      /* */
      height: 18px;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #455557;
    }
  }

  .footer {
    position: fixed;
    bottom: 28px;
    height: 72px;
    padding-top: 10px;
    width: calc(70% - 80px);
    background: #FFFFFF;
    box-shadow: 0px -6px 6px 0px rgba(0, 0, 0, 0.06);
    padding-top: 22px;

    .submit {
      width: 60px;
      background: #00B3A8;
      border-radius: 4px;
      border: none;
      margin: 0 16px 0 28px;
    }

    .cancel {
      outline: none;
      border-radius: 4px;
    }
  }
}

::v-deep .el-input--small .el-input__inner {
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #d3d8e1;
}

::v-deep .el-textarea__inner {
  height: 119px;
  background: #FFFFFF;
  border-radius: 2px;
  border: 1px solid #D3D8E1;
  height: 119px;
  resize: none;
}

::v-deep .el-input--small {
  width: 560px;
}
</style>
